/**
 * @Title: index.js
 * @Description: index
 * @author: Fanchao
 * @date: 2020/9/21 5:51 下午
 * @version V1.0
 */
import React from 'react';
import { connect } from 'umi';
import styles from './index.less';
import { Button, Form, Input, Table, Select, Popconfirm, Modal } from 'antd';
import moment from 'moment';

const { Option } = Select;

const { Item } = Form;
const layout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 22 },
};
const options = [
    {
        key: 1,
        value: '退款申请',
    },
    {
        key: 2,
        value: '等待退货',
    },
    {
        key: 3,
        value: '等待确认收货',
    },
    {
        key: 4,
        value: '等待确认退款',
    },
    {
        key: 5,
        value: '已退款',
    },
    {
        key: -1,
        value: '退款已拒绝',
    },
    {
        key: -2,
        value: '退款已关闭',
    },
    {
        key: -3,
        value: '退款不通过',
    },
];
const ApplyList = ({ ApplyList: { dataSource, keyword, limit, offset, status, showModal, orderId }, dispatch, loading }) => {
    const [form] = Form.useForm();
    const [formReject] = Form.useForm();
    const reload = () => {
        dispatch({
            type: 'ApplyList/getApplyList',
            payload: {
                keyword: '',
                limit: 10,
                offset: 0,
                status: '',
            },
        });
    };
    const search = () => {
        form.validateFields().then(values => {
            const { keyword, status } = values;
            dispatch({
                type: 'ApplyList/getApplyList',
                payload: {
                    keyword,
                    limit,
                    offset,
                    status,
                },
            });
        });
    };
    const empty = () => {
        form.resetFields();
        reload();
    };
    const searchByOffset = (offset) => {
        dispatch({
            type: 'ApplyList/getApplyList',
            payload: {
                keyword,
                limit,
                offset: offset - 1,
                status,
            },
        });
    };

    const agree = (item) => {
        dispatch({
            type: 'ApplyList/agreeRefund',
            payload: {
                order_id: item.order_id,
            },
            callback: (response) => {
                reload();
            },
        });
    };
    const reject = (item) => {
        dispatch({
            type: 'ApplyList/setShowModal',
            payload: true,
        });
        dispatch({
            type: 'ApplyList/setOrderId',
            payload: item.order_id,
        });
    };
    const formRejectReset = () => {
        formReject.resetFields();
        dispatch({
            type: 'ApplyList/setShowModal',
            payload: false,
        });
        dispatch({
            type: 'ApplyList/setOrderId',
            payload: null,
        });
    };
    const columns = [

        {
            title: '商品',
            align: 'left',
            render: (item) => {
                return (
                    <div>
                        <img style={{ width: '40px', height: '40px', marginRight: '10px' }}
                             src={item.carts_info[0].thumbnail} alt=""/>
                        {item.carts_info[0].pname}
                    </div>
                );
            },
        },
        {
            title: '订单编号',
            dataIndex: 'order_id',
            align: 'left',
        },
        {
            title: '退款金额(￥)',
            dataIndex: 'refund_fee',
            align: 'left',
        },
        {
            title: '退款人',
            align: 'left',
            render: (item) => item.address_info.name,
        },
        {
            title: '地址',
            align: 'left',
            render: (item) => item.address_info.address_detail,
        },
        {
            title: '联系方式',
            align: 'left',
            render: (item) => item.address_info.phone,
        },
        {
            title: '退货状态',
            dataIndex: 'status',
            align: 'left',
            render: (status) => options.filter((item) => item.key === status)[0].value,
        },
        {
            title: '退款原因',
            dataIndex: 'note',
            align: 'left',
        },
        {
            title: '拒绝原因',
            dataIndex: 'reject_note',
            align: 'left',
        },
        {
            title: '创建时间',
            dataIndex: 'created_time',
            align: 'left',
            render: (created_time) => moment(created_time).format('YYYY-MM-DD hh:mm:ss'),
        },
        {
            title: '操作',
            align: 'left',
            render: (item) => {
                return (
                    <div>
                        {
                            item.status === 5 ? null : (
                                <Popconfirm title="同意退款？" onConfirm={() => agree(item)}>
                                    <Button style={{ padding: 0, marginRight: '10px' }}
                                            type="link">同意</Button>
                                </Popconfirm>
                            )
                        }
                        {
                            item.status === -1 ? null : (<Button style={{ padding: 0 }} type="link"
                                                                 onClick={() => reject(item)}>拒绝</Button>)
                        }
                    </div>
                );
            },
        },
    ];
    return (
        <div className={styles.pageContainer}>
            <div className={styles.pageContainerFilter}>
                <Form
                    layout="inline"
                    form={form}
                >
                    <Item
                        label="关键字"
                        name="keyword"
                    >
                        <Input placeholder="请输入商品名称、订单号、手机号、购买人"/>
                    </Item>
                    <Item
                        label="退货状态"
                        name="status"
                    >
                        <Select
                            placeholder="请选择退货状态"
                        >
                            {
                                options.map(item => <Option key={item.key} value={item.key}>{item.value}</Option>)
                            }
                        </Select>
                    </Item>
                    <Item>
                        <Button type="primary" style={{ marginRight: '16px' }} onClick={search}>查询</Button>
                        <Button type="primary" onClick={empty}>清空</Button>
                    </Item>
                </Form>
            </div>
            <div className={styles.pageContainerTable}>
                <Table
                    bordered={false} // 是否有边框
                    rowKey='order_id' // 唯一key值
                    loading={loading} // 加载动画
                    columns={columns} // 表头
                    dataSource={dataSource.list}
                    pagination={{
                        total: dataSource.total,// 总记录数
                        defaultPageSize: 10, // 默认显示条数
                        showQuickJumper: true, // 快速跳转
                        // showSizeChanger: true, // 一页展示数据条数
                        onChange: (offset) => searchByOffset(offset),
                        showTotal: () => {
                            return `共${dataSource.total}条`;
                        },
                    }}
                />
            </div>
            <Modal
                title="拒绝原因"
                visible={showModal}
                onOk={() => {
                    formReject.validateFields().then(values => {
                        values.order_id = orderId;
                        dispatch({
                            type: 'ApplyList/rejectRefund',
                            payload: values,
                            callback: (response) => {
                                formRejectReset();
                                reload();
                            },
                        });
                    }).catch(info => {
                    });
                }}
                onCancel={() => {
                    formRejectReset();
                }}
            >
                <Form
                    {...layout}
                    layout="horizontal"
                    form={formReject}
                >
                    <Item
                        label="拒绝原因"
                        name="reject_note"
                        rules={[{ required: true, message: '必填' }]}
                    >
                        <Input.TextArea
                            autoSize={{ minRows: 2, maxRows: 6 }}
                            placeholder="请输入拒绝原因"
                        />
                    </Item>
                </Form>
            </Modal>
        </div>
    );
};

export default connect(({ ApplyList, dispatch, loading }) => ({
    ApplyList,
    dispatch,
    loading: loading.effects['ApplyList/getApplyList'],
}))(ApplyList);
